import React, {Component} from 'react';
import {Card} from 'antd-mobile';
import Nav from '../assets/images/nav-1.png'
import { GithubOutlined} from '@ant-design/icons';
import http from "../util/http";
import './ReviewList.scss'

class ReviewList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ReviewList: []
        }

    }

    componentDidMount() {
        if (this.props.movieapi){
            http.get(`${this.props.movieapi}`,this.props.pageInfo).then(({data}) => {
                console.log(data)
                if (data.code === 200) {
                    const  ReviewList=data.data.list;
                    this.setState({
                        ReviewList
                    })
                } else {
                    alert(data.msg)
                }
            })

        }else{
            this.setState ({
                ReviewList: []
            })
        }
    }

    renderReviewList() {
        return this.state.ReviewList.map(item => (
            <Card key={item.commentId} full={true}>
                <div className={"Review-item"}>
                    <div className="left" >
                        <img src={Nav} alt={"图片加载失败"} />

                    </div>
                    <div className="middle">
                            <div className={"name"}>
                                {item.vipName}
                            </div>
                        <span><GithubOutlined className={"icon"}/>{item.score}分</span>
                        <div className={"grade"}>电影：{item.movieName}</div>
                        <div className={"review-info"}>
                            {item.content}
                        </div>
                    </div>
                </div>
            </Card>
        ))
    }


    render() {
        if (this.state.ReviewList.length!==0){
            return (
                <div className={"Review-hotlist"}>
                    {
                        this.renderReviewList()
                    }

                </div>

            );
        }else {
            return <></>
        }
    }
}

export default ReviewList;
